<template>
  <div class="column-tree">
    <el-tree :data="tableData" :props="defaultProps">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span
          :class="['node-names', { active: data.id == active }]"
          :title="node.data.name"
          @click="handleClick(data)"
        >
          {{ node.data.name }}
        </span>
        <span width="200" class="btns">
          <!-- <el-button
            type="text"
            title="新增"
            style="color: #f56c6c"
            class="el-icon-plus"
            @click.stop="() => showEditDialog('add', data)"
          ></el-button> -->
          <el-button
            type="text"
            style="color: #f56c6c"
            title="编辑"
            class="el-icon-edit"
            v-if="$button('111')"
            @click.stop="() => handleEdit(data)"
          ></el-button>
          <el-button
            type="text"
            class="el-icon-minus"
            title="删除"
            style="color: #f56c6c"
            v-if="$button('112')"
            @click.stop="() => handleDelete(data)"
          ></el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: '',
      listQuery: {
        page: 1,
        limit: 10,
        pid: 0,
        classType: 3, //1.试卷 2.考试 3.栏目
      },
      tableData: [],
      defaultProps: {
        children: 'childList',
        label: 'name',
      },
    }
  },
  mounted() {
    this.getList()
    this.$bus.$on('refreshExamClassifyList', (v) => {
      if (v) {
        Object.assign(this.listQuery, v)
      }
      this.getList()
    })
  },
  beforeDestroy() {
    this.$bus.$off('refreshExamClassifyList')
  },
  methods: {
    async getList() {
      let res = await this.$store.dispatch('sysClassifyList', this.listQuery)
      this.tableData = res.data
      if (this.tableData.length) {
        this.active = this.tableData[0].id
        this.$bus.$emit('changeClassifyId', this.active)
      }
    },
    handleClick(row) {
      this.active = row.id
      this.$bus.$emit('changeClassifyId', row.id)
    },
    handleEdit(row) {
      this.$bus.$emit('showDialogExamClassifyAdd', row)
    },
    handleDelete(row) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delete(row)
        })
        .catch(() => {})
    },
    async delete(row) {
      await this.$store.dispatch('sysClassifyDel', row)
      this.getList()
    },
  },
}
</script>
<style scoped lang="scss">
.column-tree {
  margin-top: 10px;
  padding: 10px;
  min-height: 600px;
  background: #f5f7fa;
  .custom-tree-node {
    width: 310px;
    border-bottom: 1px dashed #eee;
    .node-names {
      width: 255px;
      display: inline-block;
      line-height: 40px;
      &.active {
        color: var(--colorH1);
        font-weight: bold;
      }
    }
    .btns {
      float: right;
    }
  }
}
</style>
<style scoped>
.column-tree >>> .el-tree-node__content {
  height: auto;
}
</style>